function __isObject(obj) {
  return typeof obj === "object" && obj !== null;
}
function reactive(obj) {
  return new Proxy(obj, {
    get(target, prop) {
      return target[prop];
    },
    set(target, prop, value) {
      if (__isObject(value)) {
        target[prop] = reactive(value);
      } else {
        target[prop] = value;
      }
      return true
    },
  });
}


// *********** ref是如何实现的？？

// 观察vue3的响应式对象
// ./images/1-观察vue的ref和reactive对象.png

{
  // 实现最基本的reactive对象代理

  // 两个概念
  // 1-原对象
  let obj = {
    name: "soup",
  };
  
  // 2-代理对象
  let proxy = reactive(obj);
  proxy.name = 1;
  proxy.a = { b: 2 };
  console.log(proxy);
}

//面试题1：vue3的响应式比vue2优秀在哪？
// vue2是基于Object.defineProperty，需要递归循环对每一个属性进行数据劫持和发布订阅，会有效率的损失；
// 对于新添加的属性，vue2不再进行数据劫持，不具备响应性；同样删除响应式数据的属性也没有响应性；

// vue3使用Proxy，直接代理调整个对象，代理对象操作原对象的set和get，对新添加的属性也具备响应性；



export { __isObject, reactive };
